<template>
	<div class="content-wrapper">
		<section class="content">
			<div id="rrapp" v-cloak>
				<div class="grid-btn">
					<!--<div class="form-group col-sm-2">-->
					<input type="text" class="form-control form-controla" v-model="q.username" @keyup.enter="query" placeholder="用户名">
					<!--</div>-->
					<a class="btn btn-default">查询</a>
					<a class="btn btn-primary"><i class="fa fa-plus"></i>&nbsp;新增</a>
					<a class="btn btn-primary"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
					<a class="btn btn-primary"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
				</div>
				<!--表格-->
				<div class="panel panel-primary">
					<table class="table table-bordered table-striped text-center">
						<thead>
							<tr>
								<th>用户ID</th>
								<th>用户名</th>
								<th>所属部门</th>
								<th>邮箱</th>
								<th>手机号</th>
								<th>状态</th>
								<th>创建时间</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(v,i) of itemList">
								<td>{{v.id}}</td>
								<td>{{v.username}}</td>
								<td>{{v.deptName}}</td>
								<td>{{v.email}}</td>
								<td>{{v.mobile}}</td>
								<!--<td>{{v.status}}</td>-->
								<td v-if = "v.status == 1"><span class="status-btn">正常</span></td>
								<td v-if = "v.status == 0"><span class="status-btna">冻结</span></td>
								<td>{{v.createTime}}</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!--<pagination
		    :page-index="currentPage" 
            :totla="count" 
            :page-size="pageSize" 
            @change="pageChange"></pagination>-->
			</div>
		</section>
	</div>

</template>

<script>
	import pagination from '../Pagination';
	export default {
		name: '',
		data() {
			return {
				q: {
					username: null
				},
				showList: true,
				title: null,
				roleList: {},
				user: {
					status: 1,
					deptId: null,
					deptName: null,
					roleIdList: []
				},
				itemList: [],
				pageSize: 20,
				currentPage: 1,
				count: 0,
				items: []
			}
		},
		components: {
			pagination,
		},
		methods: {
			getUserinfo: function(event) {
				var vm = this;
				$.ajax({
					type: "POST",
					url: "http://10.32.0.155/sy-erp/sys/user/list",
					data: '{"page":1,"limit":10}',
					dataType: "json",
					xhrFields: {
						withCredentials: true
					},
					success: function(data) {
						console.log(data.page.list)
						vm.itemList = data.page.list;

					}
				});
			},
			getList() {
				//模拟
				let api = 'http://10.32.0.155/sy-erp/sys/user';
				let url = `/api/list/?pageSize=${this.pageSize}&currentPage=${this.currentPage}`
				this.$http.get(url)
					.then(({
						body
					}) => {

						//子组件监听到count变化会自动更新DOM
						this.count = body.count
						this.items = body.list
					})
			},

			//从page组件传递过来的当前page
			pageChange(page) {
				this.currentPage = page
				this.getList()
			}
		},
		created: function() {
			this.getUserinfo();
			//			 this.getList();
		}
	}
</script>

<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #fff;
	}
	
	.btn-default {
		color: #333;
		float: left;
		margin-left: 10px;
	}
	
	.form-controla {
		float: left;
		width: 30%;
	}
	
	.status-btn {
		background: #5cb85c;
		display: inline;
		padding: .2em .6em .3em;
		font-size: 75%;
		font-weight: 700;
		line-height: 1;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: .25em;
	}
	.status-btna{
		background: #d9534f;
		display: inline;
		padding: .2em .6em .3em;
		font-size: 75%;
		font-weight: 700;
		line-height: 1;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: .25em;
	}
</style>